<template>
  <el-card class="account-container">
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 26px; color: #615f5f">财务管理</h1>
    <el-divider border-style="dashed" />
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 16px; color: #615f5f">余额管理</h1>

    <el-row :gutter="12">
      <el-col :span="8">
        <el-card class="box-card" shadow="hover" style="background-color: #2b3ff2" body-style="background-color: white">
          <template #header>
            <div class="card-header">
              <span style="color: white; font-weight: bold; font-size: 20px">昨日总收入</span>
            </div>
          </template>
          <div style="font-size: 26px; font-weight: bold; color: #2B3FF2">{{amountIn}}元</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover" style="background-color: #f73754" body-style="background-color: white">
          <template #header>
            <div class="card-header">
              <span style="color: white; font-weight: bold; font-size: 20px">昨日平台总收入</span>
            </div>
          </template>
          <div style="font-size: 26px;  font-weight: bold; color: #f73754">{{adminAmountIn}}元</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover" style="background-color: #0ce28f" body-style="background-color: white">
          <template #header>
            <div class="card-header">
              <span style="color: white; font-weight: bold; font-size: 20px">合计收入</span>
            </div>
          </template>
          <div style="font-size: 26px; font-weight: bold; color: #0ce28f">{{money}}元</div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider border-style="dashed" />

    <el-divider border-style="dashed" />

    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 16px; color: #615f5f">查询明细</h1>

    <div>
      <el-form  label-width="160px">
        <el-form-item label="请选择月份">
          <el-date-picker  v-model="selectedDate" type="month" placeholder="Select Month"/>
        </el-form-item>
        <el-form-item label="请选择日期">
          <el-date-picker  v-model="selectedDate" type="date" placeholder="Select Date"/>
        </el-form-item>
        <el-form-item label="请选择商家">
          <el-select v-model="selectedMerchant" placeholder="Select">
            <el-option
                v-for="item in merchants"
                :key="item.id"
                :label="item.shopName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="check">查询</el-button>
          <el-button type="primary" @click="refreshCurrentDay">手动刷新当前日期</el-button>
          <el-button type="primary" @click="refreshAllDay">手动刷新本月所有</el-button>

        </el-form-item>
      </el-form>
      <br/>
    </div>

    <el-divider border-style="dashed" />

    <el-table :data="tableData"
              :border="true"
              style="width: 100%"
              row-key="id"
              @expand-change="expandChange"
    >
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <p m="t-0 b-2">总收入: {{ props.row.amount }}</p>
            <p m="t-0 b-2">平台抽成: {{ props.row.adminAmount }}</p>
            <p m="t-0 b-2">商家利润: {{ props.row.merchantAmount }}</p>
            <p m="t-0 b-2">完成订单数: {{ props.row.finishOrderNumber }}</p>
            <p m="t-0 b-2">取消订单数: {{ props.row.canceledOrderNumber }}</p>
            <h3>订单流水详情</h3>
            <el-table
                :data="props.row.family"
                :border="true"
                lazy
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >

              <el-table-column label="结束时间" prop="checkoutTime" />
              <el-table-column prop="status" label="状态" width="180">
                <template #default="scope">
                  <el-text class="mx-1" :hidden="!(props.row.family[scope.$index].status<0)" type="danger">已退款订单</el-text>
                  <el-text class="mx-1" :hidden="!(props.row.family[scope.$index].status===4)" type="success">已完成订单</el-text>
                  <el-text class="mx-1" :hidden="!(props.row.family[scope.$index].status===3)" type="info">待评价订单</el-text>
                  <el-text class="mx-1" :hidden="!(props.row.family[scope.$index].status===1)" type="info">待完成订单</el-text>
                  <el-text class="mx-1" :hidden="!(props.row.family[scope.$index].status===2)" type="primary">待送达订单</el-text>
                  <el-text class="mx-1" :hidden="!(props.row.family[scope.$index].status===0)" type="warning">待付款订单</el-text>
                </template>
              </el-table-column>
              <el-table-column label="收货人" prop="consignee" />
              <el-table-column label="收货人电话" prop="phone" />
              <el-table-column label="总额" prop="amount" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="time" />
      <el-table-column label="入账(元)" prop="amount" />
      <el-table-column label="商家收益(元)" prop="merchantAmount" />
      <el-table-column label="平台收益(元)" prop="adminAmount" />
    </el-table>
    <el-divider />

  </el-card>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {searchMerchants} from "@/api/merchant";
import {getMoneyInfo, getOrderInMonth, refresh, refreshDay} from "@/api/money";
import {open_error, open_success} from "@/utils/common";
import {searchOrder, searchOrderByCheckoutTime} from "@/api/order";

const selectedDate = ref();

const orderList = ref([]);

const amountIn = ref(0);

const adminAmountIn = ref(0);

const money = ref(0);

const selectedMerchant = ref();

const merchants = ref([]);


const tableData = ref([]);

onMounted(() => {
  searchMerchants().then((res) => {
    merchants.value = res.data;
  });
  check();
});

// 点击展开的时候会进行加载
const expandChange = (row) => {
  console.log(row);
  searchOrderByCheckoutTime({
    time: new Date(row.time).format("yyyy-MM-dd hh:mm:ss"),
    merchantId: row.merchantId
  }).then((res) => {
    console.log(res);
    row.family = res.data;
  })
}

const refreshCurrentDay = () => {
  const time = new Date(selectedDate.value).format("yyyy-MM-dd hh:mm:ss");
  const form = ref({
    merchantId: selectedMerchant.value,
    time: time
  })
  console.log(selectedMerchant.value)
  refreshDay(form.value).then((res) => {
    if(res.state === 0) {
      open_success("刷新成功"); // 提示成功
    } else {
      open_error("刷新失败" + res.message); // 提示刷新失败
    }
    check();
  });
}

// 手动刷新当月所有的记录
const refreshAllDay = () => {
  const time = new Date(selectedDate.value).format("yyyy-MM-dd hh:mm:ss");
  const form = ref({
    merchantId: selectedMerchant.value,
    time: time
  })
  console.log(selectedMerchant.value)
  refresh(form.value).then((res) => {
    if(res.state === 0) {
      open_success("刷新成功"); // 提示成功
    } else {
      open_error("刷新失败" + res.message); // 提示刷新失败
    }
    check();
  });
}

const check = () => {
  const time = selectedDate.value !== undefined ? new Date(selectedDate.value).format("yyyy-MM-dd hh:mm:ss") : new Date().format("yyyy-MM-dd hh:mm:ss");
  // 获取这个月所有的订单信息
  getOrderInMonth({
    merchantId: selectedMerchant.value,
    time: time
  }).then((res) => {
    console.log(res.data);
    tableData.value = res.data;
    for(let item in tableData.value) {
      tableData.value[item].time = new Date(tableData.value[item].time).format("yyyy-MM-dd");
    }
  });
  // 调用函数查询首页的三个参数
  getMoneyInfo({
    time: time
  }).then((res) => {
    console.log(res);
    amountIn.value = res.data.amountLastDay;
    adminAmountIn.value = res.data.adminAmountLastDay;
    money.value = res.data.adminAmount;
  })
}


</script>
<style scoped>
.course {
  font-weight: bold;
  display: inline-block;
}
.course li {
  line-height: 36px;
  color: #409eff;
  cursor: pointer;
}
</style>